import React,{useEffect} from 'react'
import * as echarts from 'echarts';

export default function LineChart() {
    useEffect(() => {
        var chartDom = (document.getElementById('main') as HTMLElement);
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            legend: {
              data: ['今日', '昨日']
            },
            xAxis: {
              type: 'category',
              data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
            },
            yAxis: {
              type: 'value',
              max:25000,
              min:15000,
            },
            series: [
              {
                data: [
                  20300, 19500, 20400, 23600, 21500, 20030, 21300, 19800, 18500, 19750,
                  20010, 19005
                ],
                type: 'line',
                smooth: true,
                name: '昨日'
              },
              {
                data: [
                  20500, 21500, 22400, 21600, 19500, 21530, 21900, 22800, 21500, 22750,
                  21010, 20005
                ],
                type: 'line',
                smooth: true,
                name: '今日'
              }
            ]
          };
          
          option && myChart.setOption(option);
    }, [])
    
    
    
    return (
        <div style={{ marginTop: "20px", backgroundColor: "#fff" ,padding:"30px",borderRadius:"20px"}}>
            <div>
                <p>支付金额</p>
                <p style={{fontSize:"8px"}}><span>&nbsp;&nbsp;今日支付金额</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>昨日支付金额</span></p>
                <div style={{fontSize:"22px",fontWeight:"bolder"}}>271,620&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;255,120</div>
            </div>
            <div id='main' style={{ width: "1150px", height: "600px" }}></div>
        </div>
    )
}
